<template>
    <div>
      <h1>{{msg}}</h1>
      <h2>姓名：{{name}}</h2>
      <h2>性别：{{sex}}</h2>
      <h2>年龄：{{myAge}}</h2>
      <button  @click="updateAge">点击更改age</button>
    </div>
</template>

<script >
  export default {
    name: 'PropsDemo',
    data() {
      return {
        msg:"个人信息",
        myAge: this.age
      }
    },
    //更新组件传值过来的数据
    methods: {
      updateAge(){
        this.myAge = 99
      }
    },
    //父组件传值给子组件
    // props:['name','sex','age']  简要写法
    //详细写法
    // props:{
    //   name:String,
    //   sex:String,
    //   age:Number
    // }
    // 默认值写法 默认值的指定 参数的必要性
    props:{
      name:{
        type:String,
        required:true
      },
      sex:{
        type:String,
        required:true,
      },
      age:{
        type:Number,
        default:18
      }
    }
  }
</script>



<style scoped>

</style>